"use client";

import LuckeyWheelPage from "@/app/pages/lucky/lucky-wheel-page";
import {LuckyGridPage} from "@/app/pages/lucky/lucky-grid-page";
import StrategyArmoryButton from "@/app/component/StrategyArmoryButton";

import React, {useState} from "react";
import dynamic from "next/dynamic";
import {SkuProduct} from "@/app/component/SkuProduct";
import {MemberCard} from "@/app/component/MemberCard";

const StrategyRuleWeightButton = dynamic(async () => (await import("./component/StrategyRuleWeight")).StrategyRuleWeight)

export default function Home() {

    const [refresh, setRefresh] = useState(0);
    const [allRefresh, setAllRefresh] = useState(0);

    const handleRefresh = () => {
        setRefresh(refresh + 1)
        setAllRefresh(refresh +1)
    };

  return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-[#e7305e]"
           style={{backgroundImage: "url('/background.svg')"}}>
          {/* 头部文案 */}
          <header className="text-3xl font-bold text-center text-gray-800 my-8">
              大营销平台 - 抽奖展示
          </header>
          <div className="flex items-center space-x-4">
              {/* 装配抽奖 */}
              <MemberCard allRefresh={allRefresh} />

          </div>
          <div className="flex items-center space-x-4">
              {/* 装配抽奖 */}
              <StrategyArmoryButton/>

          </div>
          <div className="flex items-center space-x-4">
              {/* 装配抽奖 */}
              <SkuProduct handleRefresh={handleRefresh}/>

          </div>
          {/* 中间的两个div元素 */}
          <div className="flex flex-col md:flex-row gap-4 mb-8">
              <div className="w-full md:w-1/2 p-6 bg-white shadow-lg rounded-lg">
                  <p className="text-gray-700">
                      <LuckeyWheelPage handleRefresh={handleRefresh}/>
                  </p>
              </div>
              <div className="w-full md:w-1/2 p-6 bg-white shadow-lg rounded-lg">
                  <p className="text-gray-700">
                      <LuckyGridPage handleRefresh={handleRefresh}/>
                  </p>
              </div>
          </div>
          <div className="flex items-center space-x-4">
              <StrategyRuleWeightButton refresh={refresh}/>
          </div>

          {/* 底部文案 */}
          <footer className="text-gray-600 text-center my-8">
              分布式抽奖项目demo
          </footer>
      </div>

  );
}

